<template>
	<div class="home">
		<!-- <img class="home-bg" src="@/assets/images/welcome.png" alt="welcome" /> -->
		<el-row :gutter="10">
			<el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
				<!-- <el-card shadow="hover">
					<div class="card-title">业务统计</div>
					<div class="card-content">
						<div class="card-item bg-color1">
							<div class="item-name">今日下单</div>
							<div class="item-num">
								{{ userInfo.todayOrders }} <span style="font-size: 14px">(取消{{ userInfo.cancelOrders }})</span>
							</div>
						</div>
						<div class="card-item bg-color2">
							<div class="item-name">今日预付款</div>
							<div class="item-num">{{ userInfo.todayOrders }}</div>
						</div>
						<div class="card-item bg-color3">
							<div class="item-name">我的客户</div>
							<div class="item-num">{{ userInfo.todayOrders }}</div>
						</div>
						<div class="card-item bg-color4">
							<div class="item-name">我的积分</div>
							<div class="item-num">{{ userInfo.todayOrders }}</div>
						</div>
					</div>
					<div class="orders">
						<div class="orders-item" v-for="(item, index) in orderInfo" :key="index">
							<div class="orders-name">
								{{ item.name }}
							</div>
							<div class="orders-num">
								{{ item.num }}
							</div>
						</div>
					</div>
				</el-card>
				<el-card style="margin-top: 10px" shadow="hover">
					<div class="money">
						<el-icon style="font-size: 16px; margin-right: 5px"><Money /></el-icon>
						[23年2月5日]韩元=0.0054人民币1人民币≈185.690000韩元
					</div>
				</el-card> -->
				<el-card shadow="hover">
					<div class="card-title">快速通道</div>
					<div class="router" v-if="globalStore.userInfo.safety">
						<div class="router-item" v-for="(item, index) in routerList" :key="index">
							<div @click="path(item.path)">
								<div class="router-icon">
									<el-icon><component :is="item.icon" /></el-icon>
								</div>
								<div class="router-name">
									{{ item.name }}
								</div>
							</div>
						</div>
					</div>
					<div class="router" v-else>
						<div class="router-item" v-for="(item, index) in routerList2" :key="index">
							<div @click="path(item.path)">
								<div class="router-icon">
									<el-icon><component :is="item.icon" /></el-icon>
								</div>
								<div class="router-name">
									{{ item.name }}
								</div>
							</div>
						</div>
					</div>
				</el-card>
				<el-card style="margin: 10px 0" shadow="hover">
					<div class="card-title">集运仓库</div>
					<div class="ware">
						<div>
							<el-radio-group v-model="wareTyle">
								<el-radio-button v-for="(item, index) in wareList" :key="index" :label="item.id">{{
									item.warehouse_name
								}}</el-radio-button>
							</el-radio-group>
						</div>

						<div v-for="(item, index) in wareList" :key="index">
							<div v-show="wareTyle == item.id" class="ware-content">
								<div class="ware-left">
									<div class="ware-line">
										<span style="margin-right: 10px">&#x3000;联系人:</span
										><span>{{ item.warehouse_name }}(ID: {{ item.warehouse_code }})</span>
										<!-- <span style="color: var(--el-color-primary); font-size: 12px; margin-left: 5px"
											>注意：{{ item.attention }}</span
										> -->
									</div>
									<div class="ware-line">
										<span style="margin-right: 10px">邮政编号:</span><span>{{ item.postcode }}</span>
									</div>
									<div class="ware-line">
										<span style="margin-right: 10px">联系电话:</span><span>+{{ item.area_code }} {{ item.mobile }}</span>
									</div>
									<div class="ware-line">
										<span style="margin-right: 10px">收货地址:</span
										><span>{{ item.nation }}{{ item.province }}{{ item.city }}{{ item.district }} {{ item.detailed }}</span>
									</div>
								</div>
								<div class="ware-right">
									<el-button @click="copy(item)" type="primary">复 制</el-button>
								</div>
							</div>
						</div>
					</div>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
				<el-card shadow="hover" style="margin-bottom: 10px" v-if="globalStore.userInfo.safety">
					<!-- <div v-if="!globalStore.userInfo.safety">您还没有设置安全密码 请联系客服设置安全密码，联系电话： 01066020879</div> -->
					<div>
						<div class="card-title">
							我的账户（KRW）
							<span @click="path('/wallet/flow')" style="float: right; font-size: 12px; cursor: pointer">财务明细</span>
						</div>
						<div style="padding: 15px">
							<div class="account">
								<span class="ye"><span style="margin-right: 10px">₩</span>{{ globalStore.userInfo.money }}</span>
								<div style="margin-left: 24px; font-size: 12px; color: var(--el-color-primary)">可用余额</div>
							</div>
							<div style="margin: 5px 0; font-size: 12px">
								<span style="margin-right: 10px">授信额度:</span>
								<span>{{ Number(globalStore.userInfo.credit_limit).toFixed(2) }}</span>
							</div>
							<div style="font-size: 12px">
								<span style="margin-right: 10px">授信余额:</span>
								<span>{{
									(Number(globalStore.userInfo.credit_limit) - Number(globalStore.userInfo.credit_use)).toFixed(2)
								}}</span>
							</div>
						</div>

						<div style="text-align: center">
							<el-button @click="recharge(1)" type="primary" style="width: 40%">余额充值</el-button>
							<el-button @click="recharge(2)" type="primary" style="width: 40%">授信还款</el-button>
						</div>
					</div>
				</el-card>
				<el-card shadow="hover">
					<div class="card-title">
						消息公告
						<span @click="path('/announcement')" style="float: right; font-size: 12px; cursor: pointer">查看更多</span>
					</div>
					<div class="message">
						<el-empty v-if="!messageList.length" description="暂无公告" />
						<div @click="showDetial(item)" class="message-item" v-for="(item, index) in messageList" :key="index">
							<span>{{ item.title }}</span>
							<span>{{ item.add_time }}</span>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<Recharge v-model:showDialog="showDialog" :payType="payType"></Recharge>
		<News v-model:showDialog="showDialogNews" :detial="newsDetial"></News>
	</div>
</template>

<script setup lang="ts" name="home">
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import { listWarehouse } from "@/api/base/index";
import clipboard3 from "vue-clipboard3";
import { ElMessage } from "element-plus";
import { GlobalStore } from "@/stores";
import Recharge from "@/components/Recharge/index.vue";
import News from "@/components/News/index.vue";

import { listNotice } from "@/api/modules/message";
import { getUserInfo } from "@/api/base";

const globalStore = GlobalStore();
const router = useRouter();
const showDialog = ref(false);
const showDialogNews = ref(false);
const newsDetial = ref({});
const { toClipboard } = clipboard3();

interface INFO {
	todayOrders: string; //今日下单
	cancelOrders: string; //取消订单
	advancePaymentToday: string; //今日预付款
	myCustomers: string; //我的客户
	myPoints: string; //我的积分
}
interface Item {
	name: string;
	num: number;
}
interface Router {
	name: string;
	icon: string;
	path: string;
}
const wareTyle = ref<Number>(0);
const userInfo = reactive<INFO>({
	todayOrders: "332", //今日下单
	cancelOrders: "33", //取消订单
	advancePaymentToday: "66", //今日预付款
	myCustomers: "555", //我的客户
	myPoints: "2230" //我的积分
});
const orderInfo = reactive<Array<Item>>([
	{
		name: "待入仓",
		num: 556
	},
	{
		name: "待完善信息",
		num: 556
	},
	{
		name: "待付款",
		num: 556
	},
	{
		name: "待发货",
		num: 556
	},
	{
		name: "问题单",
		num: 556
	},
	{
		name: "取消单",
		num: 556
	},
	{
		name: "订单总数",
		num: 556
	}
]);
const routerList = reactive<Array<Router>>([
	{
		name: "在线制单",
		icon: "Box",
		path: "/makeOrder"
	},
	{
		name: "我的订单",
		icon: "Document",
		path: "/orderList/myList"
	},
	{
		name: "我的钱包",
		icon: "Postcard",
		path: "/wallet/flow"
	},
	{
		name: "预约取号",
		icon: "Clock",
		path: "/appointment"
	},
	{
		name: "我的客户",
		icon: "User",
		path: "/customers"
	},
	{
		name: "地址管理",
		icon: "MapLocation",
		path: "/address"
	}
]);
const routerList2 = reactive<Array<Router>>([
	{
		name: "在线制单",
		icon: "Box",
		path: "/makeOrder"
	},
	{
		name: "我的订单",
		icon: "Document",
		path: "/orderList/myList"
	},
	{
		name: "预约取号",
		icon: "Clock",
		path: "/appointment"
	},
	{
		name: "我的客户",
		icon: "User",
		path: "/customers"
	},
	{
		name: "地址管理",
		icon: "MapLocation",
		path: "/address"
	}
]);
const messageList: any = ref([]);

const wareList = ref<any>([]);
onMounted(() => {
	getInfo();
	listWarehouse({}).then(res => {
		wareTyle.value = (res.data as any)[0].id;
		wareList.value = res.data as any;
	});
	//消息
	listNotice({
		type: 1,
		limit: 10
	}).then((res: any) => {
		messageList.value = res.data.data;
	});
});
const getInfo = () => {
	return new Promise<void>((resolve, reject) => {
		getUserInfo({}).then((res: any) => {
			globalStore.setUserInfo(res.data.user);
			resolve(res.data.user);
			// info.value = res.data.user;
		});
	});
};
const copy = async (item: any) => {
	try {
		let clipboardData: string = `联系人:${item.warehouse_name}(${item.warehouse_code}) 邮政编号:${item.postcode} 联系电话:${item.area_code} ${item.mobile} 收货地址:${item.nation}${item.province}${item.city}${item.district}${item.detailed}`;
		await toClipboard(clipboardData);
		ElMessage.success("复制成功");
	} catch (e: any) {
		ElMessage.error(e);
	}
	return { copy };
};
const path = (path: string) => {
	router.push({
		path: path
	});
};
const payType = ref(1);
const recharge = (type: number) => {
	payType.value = type;
	showDialog.value = true;
};
const showDetial = (item: any) => {
	newsDetial.value = item;
	showDialogNews.value = true;
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
